<template>
  <div style="margin: 20px;">
    <el-form v-loading="loading" label-width="100">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="名称" style="flex: 1; margin-right: 20px;">
            <span>{{formData.systemFlowName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="提交时间" style="flex: 1; margin-right: 20px;">
            <span>{{formData.submitDatetime}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态" style="flex: 1; margin-right: 20px;">
            <span>{{flowStatus(formData.flowStatus)}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-steps style="max-width: 600px" :space="200" :active="active"
              align-center>
      <el-step
          v-for="item in flowStepData"
          :key="item.systemNodeId"
          :title="item.systemNodeName"
          :status="tepStatus(item)"
          :description="item.recordDate"
      />
    </el-steps>
    <el-table :data="tableData" v-loading="tableLoading" stripe style="width: 100%; height: 80%">
      <el-table-column type="index" label="序号" width="60"/>
      <el-table-column prop="systemNodeName" label="节点名称" min-width="100"/>
      <el-table-column prop="recordDate" label="时间" :show-overflow-tooltip="true" min-width="150"/>
      <el-table-column prop="userName" label="操作人" min-width="150"/>
      <el-table-column prop="userAccount" label="操作人账号" min-width="150"/>
      <el-table-column prop="dealResult" label="操作结果" min-width="100">
        <template #default="scope">
          {{ tableSepStatus(scope.row.dealResult) }}
        </template>
      </el-table-column>
      <el-table-column prop="rejectReason" label="决绝原因" min-width="100"/>
    </el-table>

  </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import Flow from '@/api/Flow.js';

const route = useRoute()

const loading = ref(false)
const tableLoading = ref(false)
const flowId = ref()
const active = ref(1)

const flowStepData = ref([]);
const formData = ref({});
const tableData = ref([]);

// 0草稿；100审批中；110已打回; 120已撤回； 200已完成；
const flowStatusMap = {
  0: '草稿',
  100: '审批中',
  110: '已打回',
  120: '已撤回',
  200: '已完成',
}
const flowStatus = (status) => {
  return flowStatusMap[status]
}

const tepStatusMap = {
  0: 'wait',
  100: 'error',
  200: 'success',
}
const tepStatus = (item) => {
  if (item.systemNodeType === 0) {
    return 'finish'
  }
  return tepStatusMap[item.dealResult]
}

const tableStatusMap = {
  100: '打回',
  200: '通过',
}
const tableSepStatus = (status) => {
  return tableStatusMap[status]
}

onMounted(() => {
  flowId.value = route.query.flowId
  getFlowDetail()
  listFlowStep()
});

const getFlowDetail = () => {
  loading.value=true
  const body = ref({
    id: flowId.value
  })
  Flow.flowStepDetail(body.value)
      .then(res => {
        formData.value = res.data
        flowStepData.value = res.data.records
        loading.value=false
      })

};

const listFlowStep = () => {
  tableLoading.value=true
  const body = ref({
    id: flowId.value
  })
  Flow.listFlowStep(body.value)
      .then(res => {
        tableData.value = res.data
        tableLoading.value=false
      })
      .catch(error => {
        tableLoading.value = false
      })
};

</script>

<style scoped>

</style>